<template>
  <div class="panel abs">
    <div class="sub-title building">
      <div class="icon inline"></div>
      <div class="text inline">宗地信息</div>
    </div>
    <div class="info">
      <div class="item" v-for="(value, name) in landInfo" :key="name">
        <span class="key">{{name}}：</span>
        <span class="value">{{value}}</span>
      </div>
    </div>
    <div class="sub-title point">
      <div class="icon inline"></div>
      <div class="text inline">界址点列表</div>
    </div>
    <div class="point-list">
      <div class="row">
        <div class="th inline">编号</div>
        <div class="th inline">X</div>
        <div class="th inline">Y</div>
        <div class="th inline">Z</div>
      </div>
      <div class="row" v-for="point in boundaryPoints" :key="point.id">
        <div class="td inline">{{point.id}}</div>
        <div class="td inline">{{point.x}}</div>
        <div class="td inline">{{point.y}}</div>
        <div class="td inline">{{point.z}}</div>
      </div>
    </div>
    <div class="btn" @click="closePanel">关闭</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  methods: {
    closePanel() {
      this.$store.commit('patch_land_info', null)
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      landInfo: state => state.landInfo,
      boundaryPoints: state => state.boundaryPoints
    })
  }
}
</script>

<style lang="less" scoped>
.panel{
  width: 387px;
  height: 800px;
  top: 20px;
  right: 30px;
  background-image: url(~@/assets/images/bg.png);
  background-size: 100% 100%;
  padding: 30px 25px;
  pointer-events: initial;
  .sub-title{
    font-size: 20px;
    font-weight: bold;
    color: #4BF5F1;
    text-align: left;
    margin-top: 15px;
    .icon{
      width: 24px;
      height: 24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    &.building .icon{
      background-image: url(~@/assets/icons/building.png);
    }
    &.point{
      margin-top: 40px;
      .icon{
        background-image: url(~@/assets/icons/table.png);
      }
    }
    .text{
      margin-left: 10px;
    }
  }
  .info{
    text-align: left;
    font-size: 18px;
    margin-top: 25px;
    .item{
      line-height: 36px;
      .key{
        color: #4BF5F1;
      }
    }
  }
  .point-list{
    line-height: 39.5px;
    margin-top: 15px;
    .row.active{
      background-color: rgba(0, 255, 232, 0.2);
    }
    .th{
      color: #4BF5F1;
      font-size: 18px;
      width: 25%;
      font-weight: bold;
    }
    .td{
      font-size: 14px;
      width: 25%;
    }
  }
  .btn{
    width: 160px;
    height: 50px;
    background-image: url(~@/assets/images/button.png);
    font-size: 16px;
    color: #002C46;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    line-height: 50px;
    margin-top: 30px;
  }
  .close{
    width: 16px;
    height: 16px;
    background-image: url(~@/assets/icons/close.png);
    position: absolute;
    right: 18px;
    top: 15px;
    cursor: pointer;
  }
}
</style>